<template>
  <div class="contain">
    <div class="header">修仙</div>
    <div class="body">
      <div class="btn" @click="handleClick('/start',code)">点击开始修仙</div>
      <div class="btn" @click="handleClick('/code')">点击输入天道秘传</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
        code:''
    };
  },
  methods: {
    handleClick(url, data = {}) {
      this.$router.push({ path: url, query: data });
    },
  },
};
</script>
<style scoped>
.contain {
  height: 100vh;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(./assets/images/img001.png);
}
.header {
  height: 60px;
  line-height: 60px;
  font-size: 48px;
  color: #ec6f3d;
  font-weight: border;
}
.body {
  /* height: 100%; */
  margin: 40px;
}
.btn {
  width: 200px;
  height: 60px;
  line-height: 60px;
  border-radius: 10px;
  background-color: #256be5;
  font-size: 24px;
  font-weight: border;
  color: bisque;
  text-align: center;
  margin: 20px auto;
}
.btn:hover {
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
  transition: all 0.2s;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid #fff;
  cursor: pointer;
}
</style>